import { useRef, memo, useEffect, useState } from 'react';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import { Carousel } from 'antd';

import banner from '@/assets/imgs/banner.jpg';
import { fetchHightPrice } from '@/store/home/homeSlice';

import './home.scss';

import SectionRooms from './cpns/sectionRooms';
import CitySection from './cpns/citySection';
import { log } from 'console';

const home = memo(() => {
  let dispatch = useDispatch();
  let {
    costPerform,
    plusData,
    disCount = { name: 'asl' },
    hotRec,
  } = useSelector(
    (state) => ({
      costPerform: state.home.costPerform,
      plusData: state?.home.plus,
      disCount: state.home.disCount,
      hotRec: state.home.hotRec,
    }),
    shallowEqual //只有当数据变化才重新渲染
  );
  let [isTop, setIsTop] = useState(false);

  useEffect(() => {
    dispatch(fetchHightPrice() as any);

    let JudgeisTop = () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      if (scrollTop == 0) {
        setIsTop(true);
        return;
      }

      setIsTop(false);
    };

    document.addEventListener('scroll', JudgeisTop);

    return () => {
      document.removeEventListener('scroll', JudgeisTop);
    };
  }, [dispatch]);

  return (
    <div className="">
      {/* banner图片 */}
      <Carousel autoplay>
        <div className="h-[560px]">
          <img src={banner} alt="" className="w-[100%] h-[100%] object-cover" />
        </div>
      </Carousel>
      {/* 折扣 */}
      {Object.keys(disCount).length && <CitySection info={disCount}></CitySection>}

      {/* 推荐 */}

      {Object.keys(disCount).length && <CitySection info={hotRec}></CitySection>}

      {/* 高性价比 */}
      <SectionRooms data={costPerform}></SectionRooms>

      {/* plus房源 */}
      <SectionRooms data={plusData}></SectionRooms>
    </div>
  );
});

export default home;
